<template>
  <div class="three-boxs" :class="{ 'three-boxs-active': !store.modelIndex }" id="three3-boxs">
    <!-- v-if="treeList.value.length > 0" -->
    <t-tree
      ref="tree"
      :data="treeList"
      v-model:actived="actived"
      :value="valueList"
      activable
      hover
      transition
      :expandMutex="true"
      :activeMultiple="false"
      :keys="threeKeys"
      :expandAll="false"
      :expandOnClickNode="true"
      @Active="Active"
      :expandParent="true"
    >
      <!-- draggable -->
      <!-- <div class="shadow" v-if="node.data.level !== 0"></div> -->
      <template #icon="{ node }">
        <i class="doorIcon "  v-if="node.data.children.length > 0" @Click.stop="getItemAll">&#xe664;</i></template
      >

      <template #label="{ node }">
        <div>
          <p class="three-title">
            {{ node.data.text }}
          </p>
        </div>
      </template>
      <!-- v-if="node.data.children.length > 0" -->
    </t-tree>
    <div class="footer-box">
      <t-button @click="close" variant="outline">取消</t-button>
      <t-button @click="onConfirmAnother" :loading="loading">确定移动</t-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="itemView">
// @ts-nocheck
import auxiliaryModel from './auxiliaryModel.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';
import { disableSort, moduleDelete, moduleSave, moduleList, moveModule } from '@/api/desgin/desgin';
import { ref, reactive, nextTick, defineExpose, watch, onMounted } from 'vue';

import { useProjectStore } from '@/store';
import { findIndex } from 'lodash';

const emit = defineEmits(['submit', 'close']);
const tree = ref(null);
const actived = ref([0]);
const delId = ref(0);
const visibleMessage = ref(false);
const parentId = ref(0);
const visible = ref(false); //添加辅助信息弹框
const loading = ref(false);
const valueList = ref([]);
const threeKeys = {
  value: 'id',
  label: 'text',
  children: 'children',
  key: 'id',
};
const props = defineProps({
  parentId: {
    type: Number,
  },
  visible: {
    type: Boolean,
  },
  info: {
    type: Object,
  },
  id: {
    type: Number,
  },
});
const treeList = ref([]);
const getTreeList = async () => {
  let res = await moduleList(localStorage.getItem('projectId'));
  treeList.value = res.data;
  actived.value = [treeList.value[0].id];
};
getTreeList();
const store = useProjectStore();
const value = ref(0);

const childclick = () => {};
const clock = () => {};
const moveItem = reactive({
  info: null,
});
onMounted(() => {});
const Active = (value, content) => {
  // value.value = value[0] ? value[0] : 0;

  actived.value = value;
  // valueList

  let parentId = tree.value.getParents(actived.value[0]);
  let parentIdList = parentId.map((item) => item.value);
  console.log('最佳------------', parentIdList);
  // let parentId2 = tree.value.getParent(parentId.value);
  // console.log('最佳2----', parentId2);
  // parentId.classList.add('activeStyle');
  // actived.value.push(parentId.value);
  // actived.value = [535501058728005, 535556937027653];
  console.log(actived.value);
  let all = document.querySelectorAll('#three3-boxs .t-tree__item');
  // console.log(all, 'all----');

  all.forEach((item) => {
    let dataValue = item.getAttribute('data-value');
    console.log(parentIdList.includes(dataValue), 'dataValue');

    if (parentIdList.includes(dataValue * 1)) {
      console.log(item);
      // item.style.color = 'red';

      // 获取该元素下的 .three-title 元素，并将其文字颜色设置为红色
      let titleElement = item.querySelector('.three-title');
      if (titleElement) {
        titleElement.style.color = '#e62b17';
      }
    } else {
      let titleElement = item.querySelector('.three-title');
      if (titleElement) {
        titleElement.style.color = 'rgba(0, 0, 0, 0.59)';
      }
    }
  });
};

// const setActive = (e) => {
//   nextTick(() => {
//     actived.value = [e];
//   });
// };
const onConfirmAnother = async (context) => {
  let res = await moveModule(localStorage.getItem('projectId'), props.id, actived.value[0], 1);
  console.log(res.data);
  if (res.data) {
    MessagePlugin.success('移动成功');
    emit('submit');
  }
};
const close = (context) => {
  //取消按钮
  emit('close');
};
// defineExpose({
//   setActive,
// });
</script>

<style lang="less" scoped>
.three-boxs {
  width: 100%;
  :deep(.t-tree__item) {
    position: relative;
    z-index: 3;
    height: 44px;
  }
  :deep(.t-tree__item:hover) {
    z-index: 1;
  }
}
.three-boxs-active {
  :deep(.t-tree__item) {
    position: relative;
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
  :deep(.t-tree__item:hover) {
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
}
@keyframes coverMove {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 1;
  }
  90% {
    z-index: 1;
  }
  100% {
    z-index: 666;
  }
}
:deep(.t-tree__item--open) {
  background: #f5f5f5;
  .three-title {
    // color: #e62b17;
  }
}
:deep(.t-tree__item:hover) {
  background: #f0f0f0;
}
:deep(.t-is-active .t-tree__label) {
  background: transparent;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

:deep(.t-tree__operations) {
  position: relative;
}
:deep(.t-tree__icon) {
  margin-left: 20px;
  .doorIcon {
    transition: all 0.3s;
    font-size: 16px;
    color: RGBA(158, 158, 158, 1);
    transform: rotate(-90deg);
  }
}
:deep(.t-tree__item--open) {
  .t-tree__icon {
    .doorIcon {
      transform: rotate(0deg);
    }
  }
}
.editMenu {
  opacity: 0;
  position: relative;
  margin-right: 24px;
  z-index: 9999;
  width: 24px;
  height: 24px;
  // background: #d9d9d9;
  border-radius: 4px;

  .doorIcon {
    font-size: 24px;
    color: RGBA(134, 134, 134, 1);
  }
}
.editMenu:hover {
  background: #d9d9d9;
}
:deep(.t-is-active) {
  .editMenu:hover {
    background: #ffccbd;
  }
}
.editMenu-level {
  display: none;
  position: absolute;
  top: 0;
  right: -204px;
}
.editMenu-level-content {
  display: block;

  padding: 4px 0;
  background: #ffffff;
  z-index: 999;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
    0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  margin-left: 30px;
}
.editMenu-level-item {
  display: flex;
  align-items: center;
  width: 180px;
  height: 36px;
  background: #ffffff;
  padding: 0px 16px;
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  .editMenu-level-item-left-title {
    margin-left: 4px;
  }
}
.editMenu-level-item:hover {
  background: #f5f5f5;
}
.editMenu-level-item-1 {
  position: relative;
  .editMenu-level-item-left {
    .doorIcon {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 24px;
    }
  }
}
:deep(.t-tree__item:hover) {
  height: 44px;
  .editMenu {
    opacity: 1 !important;
  }
}
.editMenu:hover {
  .editMenu-level {
    display: block;
    opacity: 1;
  }
}
.editMenu-child {
  display: none;
  position: absolute;
  top: 0;
  right: 0px;
  width: 184px;
  padding-left: 4px;
}
.editMenu-level-item-1:hover {
  .editMenu-child {
    display: block;
  }
  .editMenu-level2 {
    left: 180px;
  }
}
:deep(.t-is-active) {
  background: #ffece6 !important;
  .three-title {
    color: #e62b17 !important;
  }
}
:deep(.t-tree__label) {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.three-title {
  // display: flex;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-tree__item {
  color: rgba(0, 0, 0, 0.59);
}
#three3-boxs {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    // width: 296px;
    font-size: 14px;
    padding: 4px 10px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
:deep(.t-tree__icon::after) {
  display: none;
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 80px;
  margin-top: 26px;
  background: #fff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) inset;
  padding-right: 30px;
  :deep(.t-button) {
    margin-left: 12px;
  }
  :deep(.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost)) {
    width: 100px;
  }
  // box-shadow: inset 0px 1px 0px 0px rgba(230, 230, 230, 0.5);
}
.activeStyle {
  color: #e62b17;
}
.three-boxs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .t-tree {
    flex: 1;
  }
  .footer-box {
    flex-shrink: 0;
  }
}
</style>
